import React from 'react';
// import { canUseDOM } from 'react/lib/ExecutionEnvironment';
import BraftEditor from './braft';
// var Chart = canUseDOM ? require('react-chart') : React.DOM.div;

import './index.less';
import './braft.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};


    constructor(props, context) {
        super(props, context);
        this.state = {
            value: '',
            show: false
        }
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {
        this.setState({
            value: this.props.value,
            show: true
        });
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            src: nextProps.src,
            title: nextProps.title,
        });
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        const {value, show} = this.state;
        // if (this.refs.braft && value) {
        //     this.refs.braft.onChange(value);
        // }
        const editorProps = {
            contentFormat: 'html',
            contentId: value,
            placeholder: '撰写我的简介...',
            height: 900,
            initialContent: value,
            onHTMLChange: this.props.handleHTMLChange,
            viewWrapper: '.text',
            // onChange: (v) => {
            //     this.props.handleHTMLChange(v)
            // },
            controls: [
                'font-size',
                'bold',
                'italic',
                'underline',
                'text-align',
            ],
            fontSizes: [16, 18, 24, 32, 38],
        };
        return (
            <div className="orin-s-catalogeditortext-root">
                <div className="orin-s-catalogeditortext-body">
                    <div className="set-text">
                        <div className="text-editor">
                            {show && <BraftEditor ref="braft" {...editorProps} />}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}
